<template>
  <div v-if="typeList!=null">
    <div class="common-form">组件库</div>
    <div class="min-group">
      <div v-for="(group,key) in typeList" :key="key">
        <div class="hd">{{ typename(key) }}</div>
         <div class="bd">
           <div class="item" v-for="(item,index) in group.children" :key="index"  @click="$parent.onAddItem(item.type)">
              <p class="p-icon icon iconfont icon-tuichu"></p>
             <p class="p-txt">{{item.name}}</p>
           </div>
         </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
	data() {
		return {
			/*类别列表*/
			typeList:null
		};
	},
	props: {
		defaultData: Object
	},
	created() {
		this.init();
	},
	filters:{},
	methods: {

		/*初始化数据*/
		init() {
			let tempList={};
			for(let key in this.defaultData){
				let item=this.defaultData[key];
				if(!tempList.hasOwnProperty(item.group)){
					tempList[item.group]={};
					tempList[item.group].children=[];
				}
				tempList[item.group].children.push(item);
			}
			this.typeList=tempList;
		},
		typename(type){
			let name = '';
			if (type == 'media') {
				name = '媒体组件';
			} else if (type == 'shop') {
				name = '商城组件';
			} else if (type == 'tools') {
				name = '工具组件';
			}
			return name;
		}
	}
};
</script>

<style lang="scss" scoped></style>
